<template>
	<view class="container" :style="{paddingTop:topHeight}">
		<view class="header">
			<view class="dis-flex flex-y-center">
				<image src="@/static/imgs/back.png" mode="widthFix" @click="back" color="#252525" style="width: 35rpx;">
				</image>
				<view class="book flex-box">官宣书</view>
				<view class="buquan" @click="toJump('/pages/love/completion')">补全</view>
			</view>
		</view>
		<view class="wrap_box">
			<view class="title tac">过往</view>
			<view class="dis-flex flex-y-center flex-x-center boxWrap">
				<image v-if="user.avatar" class="avatar" :src="IMG_URL + user.avatar"
					 style="border-radius:50% ;" />
				<image v-else class="avatar" src="/static/imgs/myavatar.png" mode="widthFix" />
				<view class="nameWrap">
					<view class="name dis-flex flex-y-center"><text class="vague">{{user.username.charAt(0)}}</text>{{ user.username.substring(1) }}<view class="gxz"
							@click="toJump('/pages/love/coupleAgree?ship='+JSON.stringify(ship))">{{agree}}</view>
					</view>
					<view class="ids">ID：{{ user.I_D }}</view>
				</view>
			</view>
			<view class="times tac">登记日期：{{ formatTimestamp(ship.lovetime) }} <text v-if="ship.breakup_end_date">-</text> {{ ship.breakup_end_date  }}</view>
			<view class="times tac">官宣证登记字号：{{ ship.registration_number }}</view>
		</view>

		<view class="notice_box">
			<view class="u-content">
				<WaterFall :type="10" class="vague2" :shipid="ship.id" :userid="user.id"></WaterFall>
			</view>
		</view>
	</view>
</template>

<script>
	import {getPast} from '@/api/love.js'
	import {
		IMG_URL,
	} from "../../config/app.js";
	import WaterFall from '@/components/waterfall/waterfall'
	export default {
		name: 'past', // 过往
		components: {
			WaterFall
		},
		data() {
			return {
				IMG_URL: IMG_URL,
				list: [],
				ship:{},
				user:{},
				agree:''
			}
		},
		onLoad(option) {
			console.log(option, '过来了-----------');
			let ship =JSON.parse(option.ship_id)
			this.ship = ship
			if(option.type == 1){
				this.agree = '情侣协议'
			}
			if(option.type == 2){
				this.agree = '闺蜜协议'
			}
			
		},
		mounted	() {
			
		},
		onShow() {
			this.getPast()
		},
		methods: {
			formatTimestamp(timestamp) {
			        const date = new Date(timestamp * 1000);
			        const year = date.getFullYear();
			        const month = String(date.getMonth() + 1).padStart(2, '0');
			        const day = String(date.getDate()).padStart(2, '0');
			        return `${year}.${month}.${day}`;
			    },
			toJump(url) {
				if (!url) return
				uni.navigateTo({
					url
				});
			},
			back() {
				uni.navigateBack({
					delta: 1,
					fail(e) {
						console.log(e);
					}
				})
			},
			tabClick(e) {
				this.current = e.index
			},
			//过往
			async getPast() {
				console.log(this.ship,'sdddddddd');
				const res = await getPast({
					'ship_id': this.ship.id,
				}).then(res => {
					console.log('过往',res);
					this.user = res.data.user
				});
			},
		}
	}
</script>
<style lang="scss">
	page {
		background: #F6F6F6;
	}
</style>
<style lang="scss" scoped>
	.container {
		width: 100%;
		padding-top: 88rpx;
		.header {
			padding: 25rpx 30rpx;

			.book {
				font-weight: bold;
				font-size: 34rpx;
				color: $uni-text-color;
				margin-left: 30rpx;
			}

			.buquan {
				width: 125rpx;
				height: 53rpx;
				line-height: 53rpx;
				text-align: center;
				background: #FFFFFF;
				border-radius: 26rpx;
				border: 1px solid $uni-text-color-placeholder;
				font-size: 24rpx;
				color: $uni-text-color;
			}
		}

		.wrap_box {
			.title {
				font-weight: bold;
				font-size: 72rpx;
				color: $uni-text-color-placeholder;
				padding: 40rpx 0 60rpx;
			}

			.boxWrap {
				padding: 0 0 32rpx;

				.avatar {
					width: 100rpx;
					height: 100rpx;
					flex-shrink: 0;
				}

				.nameWrap {
					margin-left: 30rpx;

					.name {
						font-weight: 800;
						font-size: 32rpx;
						color: $uni-text-color;

						.gxz {
							width: 140rpx;
							height: 42rpx;
							line-height: 42rpx;
							text-align: center;
							background: $uni-text-color;
							border-radius: 10rpx;
							font-size: 24rpx;
							color: #fff;
							margin-left: 12rpx;
						}
					}

					.ids {
						font-size: 30rpx;
						color: $uni-text-color;
						margin: 18rpx 0 0;
					}
				}
			}

			.times {
				font-size: 26rpx;
				color: $uni-text-color-placeholder;
				margin-top: 20rpx;
			}
		}

		.notice_box {
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0px 0px 30rpx 0rpx rgba(202, 202, 202, 0.6);
			border-radius: 50rpx 50rpx 0 0;
			margin: 60rpx auto 0;
			padding: 34rpx 10rpx;
		}
	}
</style>